import React, { memo, useEffect } from 'react'
import {
  RankingWrapper,
  LeftWrapper
} from './style'

import MinRankingCover from '@/components/min-rankingCover'

import {
  getRankingListAction
} from './store/actionCreators'

import { useDispatch, useSelector, shallowEqual } from 'react-redux';


export default memo(function Ranking() {

  const dispatch = useDispatch();

  // redux hooks
  const { featureRanking, mediaRanking } = useSelector(state => ({
    featureRanking: state.getIn(["ranking", "featureRanking"]),
    mediaRanking: state.getIn(["ranking", "mediaRanking"]),
  }), shallowEqual);

  console.log(featureRanking);

  // other hooks
  useEffect(() => {
    dispatch(getRankingListAction());
  }, [dispatch]);



  return (
    <RankingWrapper className="wrap-v2">
      <LeftWrapper>
        <h3>云音乐特色榜</h3>
        {
          featureRanking.map((item, index) => {
            return <MinRankingCover name={item.name} coverImgUrl={item.coverImgUrl} updateFrequency={item.updateFrequency}/>
          })
        }
        <h3 style={{marginTop:"10px"}}>全球媒体榜</h3>
        {
          mediaRanking.map((item, index) => {
            return <MinRankingCover name={item.name} coverImgUrl={item.coverImgUrl} updateFrequency={item.updateFrequency}/>
          })
        }
      </LeftWrapper>

    </RankingWrapper>
  )
})
